<ng-container *ngIf="listOfNzTabComponent">
  <div apes-tabs-nav
    role="tablist"
    tabindex="0"
    class="apes-tabs-bar"
    [class.apes-tabs-card-bar]="apesType === 'card'"
    [class.apes-tabs-top-bar]="apesTabPosition === 'top'"
    [class.apes-tabs-bottom-bar]="apesTabPosition === 'bottom'"
    [class.apes-tabs-left-bar]="apesTabPosition === 'left'"
    [class.apes-tabs-right-bar]="apesTabPosition === 'right'"
    [class.apes-tabs-small-bar]="apesSize === 'small'"
    [class.apes-tabs-default-bar]="apesSize === 'default'"
    [class.apes-tabs-large-bar]="apesSize === 'large'"
    [apesType]="apesType"
    [apesShowPagination]="apesShowPagination"
    [apesPositionMode]="tabPositionMode"
    [apesAnimated]="inkBarAnimated"
    [ngStyle]="apesTabBarStyle"
    [apesHideBar]="apesHideAll"
    [apesTabBarExtraContent]="apesTabBarExtraContent"
    [selectedIndex]="apesSelectedIndex"
    (apesOnNextClick)="apesOnNextClick.emit()"
    (apesOnPrevClick)="apesOnPrevClick.emit()">
    <div apes-tab-label
      role="tab"
      [style.margin-right.px]="apesTabBarGutter"
      [class.apes-tabs-tab-active]="(apesSelectedIndex == i) && !apesHideAll"
      [disabled]="tab.apesDisabled"
      (click)="clickLabel(i,tab.apesDisabled)"
      *ngFor="let tab of listOfNzTabComponent; let i = index">
      <ng-container *apesStringTemplateOutlet="tab.apesTitle">{{ tab.apesTitle }}</ng-container>
    </div>
  </div>
  <div #tabContent
    class="apes-tabs-content"
    [class.apes-tabs-top-content]="apesTabPosition === 'top'"
    [class.apes-tabs-bottom-content]="apesTabPosition === 'bottom'"
    [class.apes-tabs-left-content]="apesTabPosition === 'left'"
    [class.apes-tabs-right-content]="apesTabPosition === 'right'"
    [class.apes-tabs-content-animated]="tabPaneAnimated"
    [class.apes-tabs-card-content]="apesType === 'card'"
    [class.apes-tabs-content-no-animated]="!tabPaneAnimated"
    [style.margin-left.%]="(tabPositionMode === 'horizontal') && tabPaneAnimated && (-(apesSelectedIndex || 0 ) * 100)">
    <div apes-tab-body
      class="apes-tabs-tabpane"
      *ngFor="let tab of listOfNzTabComponent; let i = index"
      [active]="(apesSelectedIndex == i) && !apesHideAll"
      [forceRender]="tab.apesForceRender"
      [content]="tab.template || tab.content">
    </div>
  </div>
</ng-container>
